import 'package:flutter/material.dart';
import 'package:visibility_detector/visibility_detector.dart';

class VisibleDetectorWrapper extends StatefulWidget {
  const VisibleDetectorWrapper({Key? key}) : super(key: key);

  @override
  State<VisibleDetectorWrapper> createState() => _VisibleDetectorWrapperState();
}

class _VisibleDetectorWrapperState extends State<VisibleDetectorWrapper> {
  @override
  Widget build(BuildContext context) {
    final widget = Container(
      height: 100,
      width: 100,
      color: Colors.red,
    );
    return VisibilityDetector(
      key: const Key('my-widget-key'),
      onVisibilityChanged: (visibilityInfo) {
        var visiblePercentage = visibilityInfo.visibleFraction * 100;
        debugPrint('Widget ${visibilityInfo.key} is $visiblePercentage% visible');
      },
      child: widget,
    );
  }
}
